<template>
    <div class="app-aside1 fl hidden-xs dker b-r bg-light width-160">
        <div class="navi-wrap">
            <!-- nav -->
            <nav ui-nav class="navi subnavi">
                <!-- list -->
                <ul class="nav">

                    <li class="line dk" style="height: 1px;"></li>

                    <li v-link="{ path: '/paas/mysql', activeClass: 'active' }">
                        <a style="line-height: 24px;font-size:18px;text-align: center !important;">
                            <span class="fa fa-chevron-left icon"></span>
                        </a>
                    </li>

                    <li class="line dk" style="margin-bottom: 0"></li>

                    <li v-link="{ name: 'basicInfo',params: { mysqlName: this.$route.params.mysqlName }, activeClass: 'active' }">
                        <a>
                            <i class="glyphicon glyphicon-calendar icon text-info-dker"></i>
                            <span class="font-bold">基本信息</span>
                        </a>
                    </li>

                    <li v-link="{ name: 'accountManage',params: { mysqlName: this.$route.params.mysqlName }, activeClass: 'active' }">
                        <a>
                            <i class="glyphicon glyphicon-stats icon text-primary-dker"></i>
                            <span class="font-bold">账号管理</span>
                        </a>
                    </li>

                    <li ui-sref-active="active">
                        <a ui-sref="paas.mysqlDetail.databaseManage">
                            <i class="glyphicon glyphicon-briefcase icon"></i>
                            <span class="font-bold">数据库管理</span>
                        </a>
                    </li>

                    <li ui-sref-active="active">
                        <a ui-sref="paas.mysqlDetail.databaseConect">
                            <i class="glyphicon glyphicon-signal"></i>
                            <span class="font-bold">数据库连接</span>
                        </a>
                    </li>

                    <li v-link="{ name: 'monitorAlarm',params: { mysqlName: this.$route.params.mysqlName }, activeClass: 'active' }">
                        <a>
                            <i class="glyphicon glyphicon-signal"></i>
                            <span class="font-bold">监控与报警</span>
                        </a>
                    </li>

                    <li ui-sref-active="active">
                        <a ui-sref="app.dashboard-v1">
                            <i class="glyphicon glyphicon-signal"></i>
                            <span>数据安全性</span>
                        </a>
                    </li>

                    <li ui-sref-active="active">
                        <a ui-sref="app.dashboard-v1">
                            <i class="glyphicon glyphicon-signal"></i>
                            <span>服务可用性</span>
                        </a>
                    </li>

                    <li ui-sref-active="active">
                        <a ui-sref="app.dashboard-v1">
                            <i class="glyphicon glyphicon-signal"></i>
                            <span>日志管理</span>
                        </a>
                    </li>

                    <li ui-sref-active="active">
                        <a ui-sref="app.dashboard-v1">
                            <i class="glyphicon glyphicon-signal"></i>
                            <span>性能优化</span>
                        </a>
                    </li>

                    <li v-link="{ name: 'recovery',params: { mysqlName: this.$route.params.mysqlName }, activeClass: 'active' }">
                        <a>
                            <i class="glyphicon glyphicon-signal"></i>
                            <span>备份恢复</span>
                        </a>
                    </li>

                    <li ui-sref-active="active">
                        <a ui-sref="app.dashboard-v1">
                            <i class="glyphicon glyphicon-signal"></i>
                            <span>参数设置</span>
                        </a>
                    </li>

                    <li v-bind:class="{'active':showSubSub}">
                        <a class="auto" @click="showSubSub=!showSubSub">
                          <span class="pull-right text-muted">
                            <i class="fa fa-fw fa-angle-right text"></i>
                            <i class="fa fa-fw fa-angle-down text-active"></i>
                          </span>
                            <i class="glyphicon glyphicon-briefcase icon"></i>
                            <span class="font-bold">项目管理</span>
                        </a>
                        <ul class="nav nav-sub dk">
                            <li class="nav-sub-header">
                                <a href>
                                    <span>项目管理</span>
                                </a>
                            </li>
                            <li ui-sref-active="active">
                                <a ui-sref="app.dashboard-v1">
                                    <span>项目列表</span>
                                </a>
                            </li>
                            <li ui-sref-active="active">
                                <a ui-sref="app.dashboard-v1">
                                    <span>新建项目</span>
                                </a>
                            </li>
                        </ul>
                    </li>

                </ul>
                <!-- / list -->
            </nav>
            <!-- nav -->
        </div>
    </div>
</template>
<style>

</style>
<script>
    export default{
        data(){
            return{
                showSubSub:false
            }
        },
        ready (){

        },
        methods :{

        },
        components:{

        }
    }
</script>
